<template>
  <div class="store-apply-record-wrap">

    <div class="league-store-apply-box">
      <div class="league-store-logo">
        <img src="./store.png" class="pic1" onclick="return false"/>
        <span class="store-title">{{storeType == 1?"加盟店":"直营店"}}</span>
      </div>

      <div class="league-store-label" v-if="realShop == 1">
        <span class="label-title">{{workTypeName}}&nbsp;&nbsp;|&nbsp;&nbsp;{{shopAddress}}&nbsp;&nbsp;|&nbsp;&nbsp;{{realShopName}}实体门店</span>
      </div>


      <div class="direct-store-label" v-if="realShop == 0">
        <span class="label-title">{{workTypeName}}&nbsp;&nbsp;|&nbsp;&nbsp;{{shopAddress}}&nbsp;&nbsp;|&nbsp;&nbsp;{{realShopName}}实体门店</span>
        <div class="location-box">
          <img src="./add.png" class="location-pic"/>
          <span class="location-val">广东省东莞市厚街镇万达广场店铺102</span>
        </div>
      </div>


      <div class="league-store-line"></div>

      <div class="store-apply-process">
        <span class="process-title">审核进度</span>

        <div class="process-box">

          <div class="process-start">
            <img src="../../../images/P_2.png" class="pic1"/>
            <div class="process-start-con">
              <span class="process-text">审核已提交</span>
              <span class="process-time">{{applyTime}}</span>
            </div>
          </div>

          <div :class="{'process-active-suc-line':status != 2,'process-active-err-line':status == 2}"></div>

          <div class="process-start process-end">
            <img src="../../../images/p_1.png" class="pic1" v-if="status == 0"/>
            <img src="../../../images/P_2.png" class="pic1" v-else-if="status == 1"/>
            <img src="../../../images/P_3.png" class="pic1" v-else-if="status == 2"/>

            <div class="process-start-con">
              <span class="process-text" v-if="status == 0">等待审核结果</span>
              <span class="process-text" v-else-if="status == 1">审核成功</span>
              <div class="process-text error-text" v-else-if="status == 2">审核失败<span v-if="remark">（理由：{{remark}}）</span></div>

              <span class="process-time" v-show="status != 0">{{endTime}}</span>
            </div>
          </div>

        </div>

      </div>

    </div>

    <button class="sure-text" type="button" @click="againApply" v-show="status == 2">重新申请</button>

    <back-page @backPage="backPage"></back-page>
  </div>
</template>

<script>
  import {getShopApply} from "../../../axios/api";
  import {formatDate} from "../../../config/util";
  import backPage from "../../../components/backPage";

  export default {
    data() {
      return {
        storeType: "",
        status: "",
        remark: "",
        workType: "",
        realShop: "",
        shopAddress: "",
        applyTime: "",
        endTime: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
      this.queryApplyRecord();
    },
    methods: {
      queryApplyRecord() {//查询申请进度
        this.$vux.loading.show({
          text: '加载中',
        });
        let params = {
          "sgin": this.userMark
        };
        getShopApply(params).then((res) => {
          if (res.code == 0) {
            this.storeType = res.data.shopType;//1加盟店2直营店
            this.status = res.data.status;//0待审核1审核通过2审核失败
            this.remark = res.data.remark;
            this.workType = res.data.workType;//1学生工2社会工3农民工4少数民族
            this.realShop = res.data.realShop;//是否有实体门店0有1无
            if (this.realShop == 1) {
              this.shopAddress = res.data.workRange;
            } else {
              this.shopAddress = res.data.shopAddress + res.data.extAddress;
            }

            this.applyTime = formatDate(new Date(res.data.time), 'yyyy-MM-dd hh:mm');
            this.endTime = formatDate(new Date(res.data.setTime), 'yyyy-MM-dd hh:mm');
          }
        });
      },
      againApply() {//重新申请
        this.$router.push("/applyStore");
      },
      backPage() {
        this.$router.push("/mine");
      }
    },
    computed: {
      workTypeName() {
        if (this.workType == 1) {
          return '学生工';
        } else if (this.workType == 2) {
          return '社会工';
        } else if (this.workType == 3) {
          return '农民工';
        } else if (this.workType == 4) {
          return '少数民族';
        }
      },
      realShopName() {
        if (this.realShop == 0) {
          return '有';
        } else if (this.realShop == 1) {
          return '无';
        }
      }
    },
    components: {
      backPage
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .store-apply-record-wrap {
    .wh(100%, 100%);
    background: #FFF;
    .league-store-logo {
      display: flex;
      align-items: center;
      .wh(100%, 1.333rem);
      .pic1 {
        margin-left: 0.32rem;
        .wh(0.64rem, 0.64rem)
      }
      .store-title {
        margin-left: 0.32rem;
        .size-color-weight(0.453rem, rgba(51, 51, 51, 1), 500);
      }
    }
    .league-store-label {
      display: flex;
      align-items: center;
      margin-left: 0.32rem;
      border-top: 0.027rem solid #f2f2f2;
      .wh(96.8%, 1.333rem);
      .label-title {
        padding-left: 0.507rem;
        .size-color(0.373rem, rgba(153, 153, 153, 1))
      }
    }
    .direct-store-label {
      display: flex;
      margin-left: 0.32rem;
      border-top: 0.027rem solid #f2f2f2;
      .wh(96.8%, 2.107rem);
      flex-direction: column;
      .label-title {
        padding-top: 0.48rem;
        padding-bottom: 0.4rem;
        padding-left: 0.507rem;
        .size-color(0.373rem, rgba(153, 153, 153, 1))
      }
      .location-box {
        display: flex;
        align-items: center;
        padding-left: 0.467rem;
        .location-pic {
          .wh(0.4rem, 0.4rem);
        }
        .location-val {
          padding-left: 0.187rem;
          .size-color(0.373rem, rgba(153, 153, 153, 1))
        }
      }
    }
    .league-store-line {
      .wh(100%, 0.267rem);
      background: #f5f5f5;
    }
    .store-apply-process {
      display: flex;
      flex-direction: column;
      .process-title {
        margin-left: 0.32rem;
        margin-bottom: 0.867rem;
        text-align: center;
        line-height: 0.64rem;
        .wh(1.973rem, 0.64rem);
        background: rgba(255, 166, 61, 1);
        border-bottom-left-radius: 0.107rem;
        border-bottom-right-radius: 0.107rem;
        .size-color(0.373rem, rgba(255, 255, 255, 1));
      }
      .process-box {
        position: relative;
        .process-start {
          display: flex;
          align-items: flex-start;
          height: 0.867rem;
          padding-left: 0.44rem;
          .pic1 {
            .wh(0.4rem, 0.4rem);
          }
          .process-start-con {
            margin-left: 0.44rem;
            display: flex;
            flex-direction: column;
            .process-text {
              padding-bottom: 0.2rem;
              .size-color(0.427rem, rgba(60, 175, 255, 1));
            }
            .error-text {
              color: #FF5353;
            }
            .process-time {
              .size-color(0.32rem, rgba(153, 153, 153, 1));
            }
          }
        }
        .process-end {
          padding-top: 1.8rem;
        }
        .process-active-suc-line {
          position: absolute;
          top: 0.2rem;
          margin-left: 0.627rem;
          .wh(0.027rem, 2.667rem);
          background: rgba(60, 175, 255, 1);
        }
        .process-active-err-line {
          position: absolute;
          top: 0.3rem;
          margin-left: 0.627rem;
          width: 0.027rem;
          height: 2.45rem;
          background: #FFCBCB;
        }
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 2rem auto 0;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
